<template>
  <div class="header-box">
    <div class="header-left">
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item v-if="route.path !== homeRouter.path" :to="homeRouter.path">
          <span class="b-item flx-align-center">
            <el-icon v-if="homeRouter.meta.icon" size="16">
              <component :is="homeRouter.meta.icon"></component>
            </el-icon>
            {{ homeRouter.meta.title }}
          </span>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="item.path" v-for="(item, index) in route.matched" :key="index">
          <span class="b-item flx-align-center">
            <el-icon v-if="item.meta.icon" size="16">
              <component :is="item.meta.icon"></component>
            </el-icon>
            {{ item.meta.title }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleLang">
        <div class="d-link">
          <img src="@/assets/images/language.png" alt="" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, index) in langs"
              :key="index"
              :command="item.key"
              :class="{ 'active-lang': useLocale.locale === item.key }"
              >{{ item.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown @command="handleUser">
        <div class="d-link">
          <img src="@/assets/images/avatar.png" alt="" />
          <span>{{ userInfo.username }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="person">个人中心</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <PersonInfoDialog ref="personInfoRef" />
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useLocaleStore } from '@/stores'
import { langs } from '@/languages'
import { homeRouter } from '@/router/routes'
// import { loginOutApi } from './apis'
import { handleLogout } from '@/utils'
import PersonInfoDialog from './components/PersonInfo.vue'
import { ElMessageBox } from 'element-plus'

const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')

const useLocale = useLocaleStore()

const route = useRoute()

const handleLang = (val: string) => {
  useLocale.setLocale(val)
}

// 打开 dialog(新增、查看、编辑)
const personInfoRef = ref<InstanceType<typeof PersonInfoDialog> | null>(null)
const openPersonInfo = () => {
  const params = {
    row: JSON.parse(localStorage.getItem('userInfo') || '{}')
  }
  personInfoRef.value?.acceptParams(params)
}

const handleUser = async (val: string) => {
  if (val === 'person') {
    openPersonInfo()
  }
  if (val === 'logout') {
    ElMessageBox.confirm(`确定要退出登录吗?`, '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true
    }).then(() => {
      handleLogout()
    })
    // loginOutApi({}).then(() => {
    //   handleLogout()
    // })
  }
}
</script>
<style lang="less" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #e4e7ed;
  .header-left {
    padding-left: 40px;
    display: flex;
    align-items: center;
  }
  .b-item {
    .el-icon {
      margin-right: 4px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .d-link {
      outline: none;
      margin-left: 12px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        margin-right: 4px;
        width: 26px;
      }
    }
  }
}
</style>
